<template>
  <div class='container'>
      <el-row :gutter="20">
        <el-col :span="6"><div class="grid-content bg-purple">【题型】:{{formData.questionType | fQuestionType}}</div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">【编号】:{{formData.id}}</div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">【难度】:{{formData.difficulty | fdifficulty}}</div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">【标签】:{{formData.tags}}</div></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6"><div class="grid-content bg-purple">【学科】:{{formData.subjectName}}</div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">【目录】:{{formData.directoryName}}</div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">【方向】:{{formData.direction}}</div></el-col>
      </el-row>
      <hr/>
      <p>【题干】:</p>
      <p class=questionword v-html="formData.question">{{formData.question}}</p>
      <div><span>{{formData.questionType | fQuestionType }}</span>选项：(以下选中的选项为正确答案)</div>
      <!-- 单选 -->
      <el-radio-group
        v-if="formData.questionType == 1"
        :value="isRight"
        >
        <el-radio class="checkedbox"
          v-for=" item in formData.options"
          :key="item.id"
          :label='item.isRight'>{{item.title}}</el-radio>
      </el-radio-group>
      <!-- 多选 -->
      <div v-else-if="formData.questionType == 2">
        <el-checkbox class="checkedbox" v-for=" item in formData.options" :key="item.id" :checked='item.isRight === 1' >{{item.title}}</el-checkbox>
      </div>
      <hr/>
      <div>【参考答案】: <el-button type="danger" size="small" @click="isVideo = true">视频答案预览</el-button></div>
      <video class="videobox" v-if="isVideo" :src="formData.videoURL" controls="controls"></video>
      <hr/>
      <div> <span>【答案解析】:</span><div style="display: inline-block;" v-html="formData.answer"></div></div>
      <hr/>
      <div>【题目备注】:{{formData.remarks}}</div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="hclose">关闭</el-button>
      </div>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions.js'
export default {
  name: 'QuestionsPreview',
  props: { id: null },
  data () {
    return {
      isVideo: false,
      isRight: 1,
      formData: {
      } // 表单详细信息
    }
  },
  created () {
    this.loadDetail()
  },
  methods: {
    async loadDetail () {
      try {
        const { data: res } = await detail({ id: this.id })
        console.log('详情', res)
        this.formData = res
        // 调用上面的方法，编辑
      } catch (err) {
        console.log(err)
      }
    },
    // 关闭按钮
    hclose () {
      // alert(1)
      this.$emit('close', false)
    }
  },
  filters: {
    fdifficulty (value) {
      const mapDifficulty = {
        1: '简单',
        2: '一般',
        3: '困难'
      }
      return mapDifficulty[value]
    },
    fQuestionType (value) {
      // console.log('类型', value)
      const mapQuestionType = {
        1: '单选',
        2: '多选',
        3: '简答'
      }
      return mapQuestionType[value]
    }
  }
}
</script>

<style>
  .questionword {
    color:blue;
    margin-bottom:10px
  }
  .checkedbox {
    display: block;
    margin-top: 10px
  }
  .el-dialog__wrapper {
    overflow: auto;
  }
  .dialog-footer {
    text-align: right;
  }
  .videobox {
    width: 400px;
    height: 300px;
  }
</style>
